<template>
  <div id="detailNav">
    <nav-bar>
      <ul slot="center" class="center">
        <li v-for="(value,index) in title" :class="{'act':index==actIndexData}" @click="change(index)" >{{value}}</li>
      </ul>
      <div slot="left"  @click="back" class="left">
        <img src="~assets/img/common/back.svg"/>
      </div>
    </nav-bar>
  </div>
</template>

<script>
  import navBar from 'components/common/navBar/navBar'
  export default{
    name:'',
    data(){
      return {
        title:['商品','参数','评论','推荐']
      }
    },
    props:{
      actIndex:{
        type:Number,
        default:0
      }
    },
    computed:{
      actIndexData:{
        get(){
          return this.actIndex
        },
        set(val){
          
        }
      }
    },
    methods:{
      change(i){
        this.actIndexData=i
        this.$emit('convey',i)
      },
      back(){
        this.$router.back()
      }
    },
    components:{
      navBar
    },
    mounted() {
      // console.log(this.actIndexData);
    }
  }
</script>

<style scoped>

  .center{
    width: 70%;
  }
  li{
    flex: 1;
    list-style: none;
    text-align: center;
  }
  ul .act{
    color:var(--color-high-text)
  }
  .left img{
    vertical-align: middle;
  }
</style>
